<h3>Annotation</h3>
<form {{action "save" on="change"}}>
    <div class="checkbox">
        <label>
            {{input type="checkbox" name="required" checked=(mut annotation.required)}} Required
        </label>
        {{#help-icon}}
            Only extract items that have this annotation. Only this sample will be affected
        {{/help-icon}}
    </div>
    <div class="form-group">
        <label for="selectionMode">Selection mode</label>
        {{select-box name="selectionMode" value=(mut selectionMode) valueAttribute='label' choices=selectionModeOptions onChange=(action "save")}}
    </div>
    {{#if (not-eq annotation.selectionMode 'auto')}}
        <div class="form-group{{if invalidSelector ' has-error'}}">
            <label for="selector">Selector</label>
            {{#if (eq annotation.selectionMode 'css')}}
                {{buffered-input type="text" name="selector" class="form-control" value=(mut cssSelector) viewValue=(mut editedCssSelector) onChange=(action 'save')}}
                <span class="help-block{{if (not invalidSelector) ' hide'}}">The input value is not a valid CSS selector.</span>
            {{else}}
                {{input type="text" name="selector" class="form-control" value=(get annotation annotation.selectionMode) readonly=true}}
            {{/if}}
        </div>
    {{/if}}
    <div class="form-group">
        <label for="attribute">Source</label>
        {{select-box name="attribute" value=(mut attribute) valueAttribute='name' choices=attributes onChange=(action "save")}}
    </div>
</form>
